<html>

<head>
	<meta charset="utf-8">
	<title>线变换动画</title>
	<script src='../w3d.js' type="text/javascript"></script>
	<script src='../config.js' type="text/javascript"></script>
	<script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
	<script type="text/javascript">

		let engine, scene, canvas, body, geometry,sampler,samplerScale,lineObject;
		function init() {
			canvas = document.getElementById('canvas');
			body = document.getElementById('body');
			let path = [
				`../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
				`../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
				`../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
				`../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
				`../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
				`../../demo/pub/assets/skybox/twilight/neg-z.jpg`
			]
			engine = new w.Engine({auth,
				canvas: canvas,
				contextmunu: false,//是否支持右键菜单
				background: path,
				environment: path,
				intensity: 1,
				gamma:1.0,
				ambientColor: "#ffffff",
				ambientIntensity: 1.0
			});
			engine.init(this.initGPU);
		}
		function initGPU() {
			scene = engine.scene;
			scene.postProcessing.add(new w.effects.Fxaa());
			scene.orbit.maxPitch = Math.PI / 3;//限制操作相机的orbit组件的最大倾斜角度。
			initCamera();//初始化相机姿态
			addMesh();//添加点
			addAnimation('none');
			initGUI();
		}
		function initCamera() {
			let camera = engine.scene.getCamera()
			camera.near = 0.1;
			camera.far = 1000;
			camera.trans.position = [0, 0, 50];
			camera.pitch=Math.PI/4;
		}
		function addMesh() {
			let position = [-5, -5, 0, 5, -5, 0, 5, 5, 0, -5, 5, 0];
			let geometry = new w.geometry.ExtrudeGeometry({
				data: [
					{
						shape: position,
						holes: [],
						height: 10,
					}
				],
			});
			let verts = geometry.verticesArray;
			let lineVex = [];
			for (let i = 0; i < verts.length; i = i + 9) {
				let point0 = [verts[i], verts[i + 1], verts[i + 2]];
				let point1 = [verts[i + 3], verts[i + 4], verts[i + 5]];
				let point2 = [verts[i + 6], verts[i + 7], verts[i + 8]];
				lineVex.push([...point0, ...point1, ...point2, ...point0]);
			}
			let lineG = new w.geometry.LineGeometry({
				position: lineVex,
				lineWidth: 1,
				lineJoint: "bevel",
				capCount: 0,
				back: true,
			});
			let lineM = new w.material.BasicMaterial({
				color: "#2373FF",
				side:"none"
			});
			let mesh = new w.component.Mesh({ geometry: lineG, material: lineM });
			lineObject=new w.Object3D();
			lineObject.addComponent(mesh);
			scene.addEntity(lineObject);
		}
		function addAnimation(easing) {
			let animation = new w.animation.Animation({ id: "line", loop: 0 });
			//rotation
			sampler = new w.animation.Sampler([0, 6], 
				[[0, 0, 0], [0,0,Math.PI]], "LINEAR", easing);
			let channel = new w.animation.Channel(lineObject.trans, "rotation");
			channel.add(sampler);
			animation.add(channel);
			//scale
			samplerScale = new w.animation.Sampler([0,3,6], 
				[[1, 1,1], [2,2,2],[1, 1,1]], "LINEAR", easing);
			let channelScale = new w.animation.Channel(lineObject.trans, "scale");
			channelScale.add(samplerScale);
			animation.add(channelScale);
			scene.addAnimation(animation);
		}

		function initGUI() {
			const GUI = lil.GUI;
			const gui = new GUI();
			let folder = gui.addFolder('animation');
			folder.add(sampler, 'easing', easing);
			folder.add(samplerScale, 'easing', easing);
		}

	</script>
	<style>
		html,
		body,
		#canvas {
			height: 100%;
			width: 100%;
			margin: 0px;
			padding: 0px;
		}
	</style>
</head>

<body onload="init()">
	<canvas id="canvas"></canvas>
</body>

</html>